<template>
  <view :class="classArr" @click="controller.onClick()" :style="backgroundStyle">
    <!-- TODO 处理自定义样式 uni 打包问题 -->
    <!-- <style
      v-if="controller.model.cssStyle"
      type="text/css"
      v-html="controller.model.cssStyle"
    ></style> -->
    <!-- 内容区 -->
    <IBizRow :layout="modelData.layout">
      <template v-for="panelItem in modelData.panelItems" :key="panelItem.id">
        <IBizCol :layoutPos="modelData.layoutPos" :state="controller.state">
          <!-- #ifdef H5 -->
          <slot :name="panelItem.id"></slot>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN-->
          <slot name="{{panelItem.id}}"></slot>
          <!-- #endif  -->
        </IBizCol>
      </template>
    </IBizRow>
  </view>
</template>
<script setup lang="ts">
import { IPanelContainer } from '@ibiz/model-core'
import { computed } from 'vue'
import { isSvg } from '@ibiz-template/core'
import { PanelContainerImageController } from './i-biz-panel-container-image.controller'
import { useNamespace } from '@/use'

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: PanelContainerImageController,
    required: true,
  },
})

const ns = useNamespace('panel-container-image')
const { id } = props.modelData

// 类名控制
const classArr = computed(() => {
  let result: Array<string | false> = [ns.b(), ns.m(id)]
  result = [...result]
  if (props.controller) {
    result.push(
      ...props.controller.containerClass,
      ns.is('hidden', props.controller.state && !props.controller.state.visible),
    )
  }
  return result
})

const backgroundStyle = computed(() => {
  if (props.controller) {
    const image = props.controller.model.sysImage
    const styles = {}
    let imgStr = ''
    if (image?.rawContent) {
      if (isSvg(image.rawContent)) {
        imgStr = `url(data:image/svg+xml;base64,${btoa(image.rawContent)})`
      } else {
        imgStr = `url(${image.rawContent})`
      }
    } else if (image?.imagePath) {
      imgStr = `url(${image.imagePath})`
    }
    if (imgStr) {
      Object.assign(styles, {
        backgroundImage: imgStr,
      })
    }
    return styles
  }

  return ''
})
</script>
<style lang="scss">
@import './i-biz-panel-container-image';
</style>
